<template>
	<div id="Games">
		<ul>
			<li v-for="(item,key) in allGames" :key="key" >
				<img :src="$baseURL+item.icon2"  alt=""/>
				<p>{{item.cn}}</p>
			</li>
			<li @click="showAddNew=true">
				<i class="el-icon-plus"></i>
			</li>
		</ul>
		<!--<transition name="fade">
			<router-view/>
		</transition>-->
		<add-new-games :showAddNew="showAddNew"/>
	</div>
	
</template>

<script>
	import AddNewGames from "./AddNewGames"
	export default{
		components:{AddNewGames},
		data(){
			return{
				gameList:[],
				showAddNew:false,
			}
		},
		computed:{
			allGames(){
				return this.$store.getters.allGames;
			}
		},
		methods:{
			pushToView(cn){
				this.$router.push({name:cn})
			},
			addNewOne(){
				
			}
		},
		created(){
			this.$store.dispatch('loadAllGames')
		}
	}
</script>

<style lang="scss" scoped="scoped">
	#Games{
		width: 100%;
		height: 100%;
		display: flex;
		list-style: none;
	}
	#Games ul{
		width: 100%;
		height: 100px;
	}
	li img{
		width: 80%;
		height: 80%;
	}
	#Games li{
		width:100px;
		height: 100px;
		float: left;
		text-align: center;
		margin: 10px 10px;
	}
	#Games i{
		width: 100px;
		height: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: white;
		border:1px dotted black;
		
	}
	.el-icon-plus{
			font-size: 40px;
		}
		
</style>